@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

:host {
  display: block;
}

.api-quality {
  &__content {
    display: flex;
    align-items: center;
    flex-direction: row;

    &__score {
      flex: 1 1 100%;
      margin: 32px 48px 32px 32px;
    }

    &__list {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 4px 0;

      &__item {
        width: 50%;
        display: flex;
        align-items: center;
        padding: 4px 0;

        &__text {
          margin-left: 8px;
        }

        &__red-icon {
          flex: 0 0 auto;
          color: mat.get-color-from-palette(gio.$mat-error-palette, 'default');
        }

        &__green-icon {
          flex: 0 0 auto;
          color: mat.get-color-from-palette(gio.$mat-success-palette, 'darker20');
        }
      }
    }
  }
}
